资源管理

实际项目中，会包含css、images、font等各种各样的资源文件，而webpack都可以对这些文件进行打包处理。

加载css

webpack默认只支持原生javascript，所以需要安装style-loader和css-loader。

npm install --save-dev style-loader css-loader

配置webpack.config.js文件，增加module选项：

module:{
    rules:[
        {
            test:/\.css$/,
            use:[
                'style-loader',
                'css-loader'
            ]
        }
    ]
}

现在在src下新增一个style.css文件：

html{
    color:red;
}

在demo1.js文件引入css：

import './style.css';
import word from './demo2';
document.write(word);

命令行运行npm run build，你可以看到页面文字变成了红色。

审查元素，你会看到，在index.html文件的head标签里插入了一个style标签，style.css配置的样式被添加进了该标签中。

每一个css文件都会以内联的形式去渲染，如果上例多引入了一个css文件，则head标签里就会多一个style标签。

注意这里style-loader和css-loader的顺序是不可以反过来的。这个顺序是从下往上的，如果有sass-loader，应该放在最下边。css-loader是用来处理url等，style-loader将style插入页面的style标签。

加载图片

首先需要安装file-loader：

npm install --save-dev file-loader

配置webpack.config.js文件

module:{
    rules:[
        {
            test:/\.css$/,
            use:['style-loader','css-loader']
        },
        {
            test:/\.(png|jpg|jpeg|gif)$/,
            use:['file-loader']
        }
    ]
}

在src目录添加一张图片bg.jpg，在style.css为html添加该图片作为背景。

html{
    color:red;
    background:url(./bg.jpg) no-repeat;
}

运行命令打包。

现在在dist目录会生成一张图片，打开html，会发现图片的引用路径与index.html是同级，所以现在把index.html也放在dist目录下。

如果在js文件中，通过import引入图片文件，那么这个模块就是该图片在dist目录下的文件名。

关于图片处理有专门的image-loader和url-loader配合，这里先不做介绍。

加载字体

这里也是用到了file-loader，所以为了直观，分开配置webpack.config.js：

module:{
    rules:[
        {
            test:/\.css$/,
            use:['style-loader','css-loader']
        },
        {
            test:/\.(png|jpg|jpeg|gif)$/,
            use:['file-loader']
        },
        {
            test:/\.(woff|woff2|eot|ttf|otf)$/,
            use:['file-loader']
        }
    ]
}

在src目录下添加一个字体文件，并在style里配置引用：

@font-face{
    font-family:MyFont,
    url:(./font.ttf)
}
html{
    color:red;
    font-family:MyFont;
}

运行命令打包。

加载数据

这里指加载本地的XML和JSON文件，因为很少用到，暂时不做介绍。

官方：https://webpack.js.org/guides/asset-management/#loading-data